<template>
			<view v-if="list.length > 2" class="hotBox">
				<view style="width: 92vw;margin: auto;" class="isTitle">{{title}}</view>
				<view class="content" v-if="listItem.length > 0 && hasLoad[listIndex]">
					<view v-for="(cardItem, cardIndex) in listItem" @click="toDetail(cardItem)" style="margin-bottom: 10rpx;" class="imgItem">
						<image lazy-load class="imgBox" :src="cardItem.coverImgUrl"></image>
						<view style="text-align: center;color: #333333;font-size: 30rpx;margin-top: 15rpx;" class="clamp">{{ cardItem.title }}</view>
						<view style="text-align: center;color: #B3B3B3;font-size: 26rpx;margin-top: 2rpx;">
							{{ cardItem.finish ? '已完结共' + cardItem.updateOfEpisodes + '集' : '更新至第' + cardItem.updateOfEpisodes + '集' }}
						</view>
					</view>
					<view v-if="listItem.length % 3 == 2" style="width:230rpx;height: 342rpx;"></view>
				</view>
				<view class="content" v-if="!hasLoad[listIndex]">
					<view class="imgItem" v-for="(itemScaff, indexScaff) in 9" :key="index">
						<view class="imgBox"><view class="imgBox" style="background:#f7f7f7;"></view></view>
					</view>
				</view>
				<view class="content" v-if="listItem.length === 0 && hasLoad[listIndex]"><noData></noData></view>
				<view class="loadMoreBox" @click.stop="lower1" v-if="listItem.length > 3 && isLast">
					<loadMore @loadMore="lower1">
						<view class="loadMore">{{ noMore[listIndex] == 1 ? '到底啦，别再拉了～' : noMore[listIndex] == 0 ? '加载更多' : '加载中' }}</view>
					</loadMore>
				</view>
			</view>

</template>

<script>
	export default {
		props:{
			isLast:{
				type:Boolean,
				default:false
			},
			title:{
				default:'当前热播',
				type:String
			},
			listIndex:{
				default:0.,
				default:Number
			},
			list:{
				default:()=>{
					return []
				},
				type:Array
			},
			noMore:{
				default:()=>{
					return []
				},
				type:Array
			},
			hasLoad:{
				default:()=>{
					return []
				},
				type:Array
			}
		},
		data() {
			return {
				listItem:[]
			}
		},
		methods: {
			lower1(){
				this.$emit('loadMore');
			},
			toDetail(item, type) {
				if (type == 'mayLike') {
					this.$uma && this.$uma.trackEvent('Ume_skip', {
						name: 'Ume_skip_page1_like'
					});
				} else if (type == 'hot') {
					this.$uma && this.$uma.trackEvent('Ume_skip', {
						name: 'Ume_skip_page1_hot'
					});
				}
				console.log('item', item);
				this.zwyRouter(`../video/video?fakeId=${item.fakeId}&compilationId=${item.compilationId}`);
			},
			getList(){
				let res = this.list;
				console.log('hotList',res);
				this.listItem = (res || []).map((item, index) => {
					item = item.contentInfo;
					item['index'] = index;
					return item;
				});
			}
		},
		onReady() {
			
		},
		created() {
			this.getList();
		}
	}
</script>

<style lang="scss" scoped>
	.hotBox{
		margin-bottom: 30rpx;
	}
	.imgItem {
		.imgDesTitle {
			flex: 1;
			overflow: hidden;
			-ms-text-overflow: ellipsis;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.imgLabel {
			margin-right: 5rpx;
			font-size: 21rpx;
			color: white;
			width: 55rpx;
			height: 29rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 4rpx;
		}
		.labelColor0 {
			background: linear-gradient(225deg, rgba(255, 185, 92, 1) 0%, rgba(247, 123, 0, 1) 100%);
		}
		.labelColor2 {
			background: linear-gradient(225deg, rgba(155, 226, 91, 1) 0%, rgba(99, 171, 21, 1) 100%);
		}
		.labelColor1 {
			background: linear-gradient(225deg, rgb(250, 132, 162) 0%, rgb(255, 129, 160) 30%);
		}
		.labelColor3 {
			background: linear-gradient(225deg, rgba(255, 185, 92, 1) 0%, rgba(247, 123, 0, 1) 100%);
		}
		.labelColor4 {
			background: linear-gradient(225deg, rgb(11, 185, 234) 0%, rgb(72, 211, 250) 100%);
		}
		.labelColor5 {
			background: linear-gradient(225deg, rgb(220, 124, 253) 0%, rgb(248, 83, 246) 100%);
		}
		.imgDesBox {
			box-sizing: border-box;
			font-size: 26rpx;
			color: #474747;
			font-weight: bold;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			height: 58rpx;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			padding: 0 7rpx;
			box-sizing: border-box;
		}
		.imgBox {
			border-radius: 13rpx;
			position: relative;
			width: 220rpx;
			height: 330rpx;
		}
		.vipImg {
			width: 66rpx;
			height: 36rpx;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 9;
		}
		width: 220rpx;
		box-sizing: border-box;
		display: flex;
		position: relative;
		margin-top: 19rpx;
		flex-direction: column;
		overflow: hidden;
		box-sizing: border-box;
	}
	.loadMore {
		background-color: #ffffff;
		padding: 0 23rpx;
		position: relative;
		z-index: 11;
	}
	.loadMoreBox::before {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		width: 90vw;
		height: 2rpx;
		background-color: #d9d9d9;
		margin: auto;
	}
	.loadMoreBox {
		position: relative;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100vw;
		font-size: 22rpx;
		color: #c3c3c3;
	}
	.content {
		display: flex;
		flex-wrap: wrap;
		width: 100vw;
		padding: 0 3%;
		box-sizing: border-box;
		justify-content: space-between;
	}
.isTitle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 22rpx;
	width: 96vw;
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
	margin-top: 18rpx;
}
</style>
